<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Find</title>
    <link href="../css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="../css/font-awesome.min.css?v=4.4.0" rel="stylesheet">
    <link href="../css/animate.css" rel="stylesheet">
    <link href="../css/style.css?v=4.1.0" rel="stylesheet">
    <link href="../css/scholar/scholar.css" rel="stylesheet">
    <link rel="stylesheet" href="../css/dataGalaxy/index.css"/>
    <link rel="stylesheet" href="../css/dataGalaxy/dg-scholar.css"/>
    <link rel="stylesheet" href="../css/scholar/analysis.css">
    <link rel="stylesheet" href="../css/scholar/wisdomAtlas.css">
    <!--<link rel="stylesheet" href="../css/scholar/simulationScroll.css">-->
    <style>
        #atlas {
            font-size: 55px;
            width: 100%;
            text-align: center;
            line-height: 600px;
            height: 100%;
        }

        #expertListBox {
            display: none;
            height: 100%;
            overflow-y: auto;
            overflow-x: hidden;
        }
        .table {
            background-color: #fff;
        }
        .table th, .table td {
            text-align: center;
        }
        .table tr {
            border-left: 1px solid #e7eaec;
        }
        
    </style>
</head>
<body style="background-color: #eef3fa; overflow: hidden;">
<div class="content" id="box" v-cloak>
    <div class="top">
        <span class="return">
            <a :href="'searchList.html?keyword='+keyword+'&zh_keyword='+zh_keyword">
            <i class="fa fa-reply" aria-hidden="true"></i></a>
        </span>
        <!--<span class="analysis-logo">NexMagic scholar</span>-->
        <span class="analysis-logo"><img src="../img/scholar/logo1.png" style="height:25px;margin-bottom:15px;"/></span>
    </div>
    <div class="content-all">
        <div class="content-menu">
            <ul>
                <li class="menu-li"><a :href="'analysis.html?version=' + timestamp_"><i class="fa fa-home"></i><span>Home</span></a>
                </li>
                <li class="menu-li"><a :href="'learning.html?version=' + timestamp_"><i class="fa fa-book"></i><span>Academics</span></a>
                </li>
                <li class="menu-li"><a :href="'wisdomAtlas.html?version=' + timestamp_"><i
                        class="fa fa-asterisk"></i><span>Graph</span></a></li>
                <li class="menu-li checked"><a :href="'discovery.html?version=' + timestamp_"><i
                        class="fa fa-compass"></i><span>Find</span></a></li>
            </ul>
        </div>
        <div class="row">
            <div class="content-right">
                <div class="col-md-2 userinfo" style="padding-top: 0px">
                    <div style="display: none;">
                        <img class="userinfo-head" onerror="nofind(this)"
                             :src="(expert.img != undefined && expert.img != '' && expert.img != null)?(resourceUrl + expert.img):'../img/scholar/head/common-head.png'">
                    </div>
                    <div class="userinfo-span realname" style="margin: 10px" @click="controlInfo();">
                        <span title="Stephen Hawking">{{expert.name}}</span><i
                            :class="showInfoFlag?'fa fa-chevron-up':'fa fa-chevron-down'"></i>
                    </div>
                    <div v-if="showInfoFlag" class="userInfo-detail">
                        <!--<span class="userinfo-span"><i class="fa fa-briefcase"></i> {{expert.position != undefined ? expert.position : ''}}</span>
                        --><span class="userinfo-span"><i class="fa fa-map-marker"></i> {{expert.country != undefined ? expert.country : ''}}</span>
                        <span class="userinfo-span"><i class="fa fa-home"></i> {{expert.authorsOrg}}</span>
                        <div class="skill-div">
                            <span class="skill-item" v-for="item in expert.foSets">{{item}}</span>
                        </div>
                    </div>
                    <hr/>
                    <!--<div class="userInfo-add">
                        <ul>
                            <li class="row">
                                <div class="col-md-9" @click="queryRelation(false, 'expert', 'Lei Li')">Lei Li</div>
                                <div class="col-md-3">
                                    &lt;!&ndash;<button class="btn btn-danger btn-circle btn-sm" type="button"><i class="fa fa-minus"></i>
                                    </button>&ndash;&gt;
                                </div>
                            </li>
                            <li class="row">
                                <div class="col-md-9" @click="queryRelation(false, 'expert', 'Jiawei Han')">Jiawei Han</div>
                                <div class="col-md-3">
                                    &lt;!&ndash;<button class="btn btn-danger btn-circle btn-sm" type="button"><i class="fa fa-minus"></i>
                                    </button>&ndash;&gt;
                                </div>
                            </li>
                        </ul>
                    </div>-->
                    <!--<hr/>-->
                    <div class="userInfo-add">
                        <!--<ul>
                            <li class="row">
                                <div class="col-md-9" @click="queryRelation(false, 'expert', 'University of Cambridge')">University of Cambridge</div>
                                <div class="col-md-3">
                                    &lt;!&ndash;<button class="btn btn-danger btn-circle btn-sm" type="button"><i class="fa fa-minus"></i>
                                    </button>&ndash;&gt;
                                </div>
                            </li>
                        </ul>-->
                        <ul class="radio-box">
                            <li>
                                <input type="radio" name="condition" id="radio-expert" value="expert"
                                       v-model="radioValue">
                                <label for="radio-expert">Expert</label>
                            </li>
                            <!--<li>
                                <input type="radio" name="condition" id="radio-org" value="org" v-model="radioValue">
                                <label for="radio-org">Organization</label>
                            </li>-->
                        </ul>
                        <ul>
                            <li style="position: relative;">
                                <input class="input-key" v-model="keyValue"/>
                                <button type="button" class="btn-control search-icon" @click="queryRelation(true)"
                            style="right:0px;top: -2px;"><i class="fa fa-search"></i></button>
                                <!-- <button class="find-btn" @click="queryRelation(true)">Find</button> -->
                            </li>
                        </ul>
						
						<p style="line-height:60px;text-indent:10px;font-size: 18px;border-bottom: 1px solid #e7eaec">find result :</p>
                        <!--<div class="add-box">
                            <button class="btn btn-warning btn-circle btn-sm" type="button"><i class="fa fa-plus"></i>
                            </button>
                            Add key words
                        </div>-->
                        <div v-for="(item, index) in expertsList" @click="showGraph(item.id)" style="border-bottom: 1px solid #e7eaec;cursor: pointer;position: relative;margin-top: 10px;">
	                		<p style="font-size: 16px;"><i class='fa fa-user'></i> {{item.name}}</p>
	                		<p style="font-size: 14px;color: #69b4bd"><i class='fa fa-university'></i> {{item.authorsOrg}}</p>
	                		<div :id="gernerateId(item.id)" style="width: 20px;height: 20px;position: absolute;top: 3px;right: 3px;color: red;display: none">
	                			<i class="fa fa-thumb-tack"></i>
	                		</div>
	                	</div>
                    </div>
                </div>
               
                <div class="col-md-10 chart-main" id="chart-main">
                    <div class="content-chart">
                        <div class="chart-box">
                            <ul class="classifyBall-box" style="background: none;">
                                <li>
                                    <label for="biaoqian">Node Label</label>
                                    <input type="checkbox" class="showTips" id="biaoqian">
                                </li>
                            </ul>
                            <ul class="tools" style="display: none;">
                                <li><img src="../img/icons/plus.png"/></li>
                                <li><img src="../img/icons/minus.png"/></li>
                                <li><img src="../img/icons/refresh.png"/></li>
                            </ul>
                            <div id="atlas"></div>
                        </div>

                    </div>
                    <div class="learn-loading">
                        <div class="sk-spinner sk-spinner-three-bounce">
                            <div class="sk-bounce1"></div>
                            <div class="sk-bounce2"></div>
                            <div class="sk-bounce3"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="bottom">
        <span class="bottom-left">中译语通科技股份有限公司&nbsp;&nbsp;&nbsp;&nbsp;版权所有</span>
        <span class="bottom-right">Copyright © 2018-京ICP备13002826号-9</span>
    </div>

</div>

<script src="../js/jquery.min.js"></script>
<!--<script src="../js/bootstrap.min.js"></script>-->
<!--<script src="../js/polyfill.min.js"></script>-->
<script src="../js/vue.min.js"></script>
<!--<script src="../js/build/simulationScroll.js"></script>-->
<!--<script src="../js/echarts/echarts.min.js"></script>-->
<script src="../js/layer/layer.js"></script>
<script src="../js/dataGalaxy/dg-scholar.js"></script>
<script src="../js/gAjax.js"></script>
<script>
    var KingVue = new Vue({
        el: '#box',
        data: {
            resourceUrl: "",
            expert: {},
            showInfoFlag: false,
            textNum: 4,
            scrollWidth: 0,
            keyword: "",
            zh_keyword: "",
            timestamp_: new Date().getTime(),
            expertsList: [],
            radioValue: 'expert', // 单选，机构或专家
            keyValue: '', //用户输入的关键词
            oldKeyValue: ''
        },
        mounted: function () {
            var _this = this;
            _this.resourceUrl = gAjax.resourceUrl;
            var scholarId = getStorage("scholarId");
            _this.queryExpertDetail(scholarId);

            _this.keyword = getStorage("scholar_searchKeyword");
            _this.zh_keyword = encodeURI(_this.keyword)

            /*this.scrollWidth = 450 * this.textNum;*/
        },
        methods: {
        	gernerateId: function (pid){
        		return "fa_thumb_tack_" +pid
        	},
        	queryExpertDetail: function (scholarId) {/*查专家详细信息*/
                var _this = this;
                gAjax.requestNoAsync("expert/getExpertDetail", {id: scholarId}).then(function (result) {
                    _this.expert = result;
                    //console.log(JSON.stringify(result));
                    _this.expert.foSets = _this.expert.foSets.slice(0, 5);
                });
            },
            queryRelation: function (flag, type, name) {
                $(".content-chart").hide();
                $("#expertListBox").hide();
                $("#chart-main").attr("class", "col-md-10 chart-main");
                $(".learn-loading").show();
                var _this = this;
                var radioValue = "", inputValue = "";
                if (flag) {
                    radioValue = _this.radioValue;
                    if (!radioValue) {// undefined
                        layer.msg("Please select one for radio.");
                        $(".learn-loading").hide();
                        return false;
                    }
                    inputValue = _this.keyValue;
                    if (!inputValue || inputValue.trim().length < 1) {
                        layer.msg("Please input keywords.");
                        $(".learn-loading").hide();
                        return false;
                    }
                } else {
                    inputValue = name;
                }

                // 判断关键词是否改变
                if (_this.oldKeyValue == inputValue) { // 没改不重新查
                    $("#expertListBox").show();
                    $("#chart-main").attr("class", "col-md-8 chart-main");
                    /*layer.open({
                        type: 1,
                        title: 'Accurate Retrieval',
                        area: ['600px', '272px'],
                        content: $("#expertListBox"),
                        cancel: function(){
                            $(".learn-loading").hide();
                        }
                    });*/
                } else {
                    gAjax.request("expert/getExpertByName", {name: inputValue}).then(function (result) {
                        _this.oldKeyValue = inputValue;
                        if (result.length == 0) {
                            layer.msg("There is no expert whose name is " + inputValue + ".");
                        } else {
                            _this.expertsList = result;
                            $("#expertListBox").show();
                        }
                        
                        $(".learn-loading").hide();
                        
                    });
                }
            },
            showGraph: function (endExpertId) {
                var _this = this;
                gAjax.request("expert/getRelationForExpertOrOrg", {
                    type: _this.radioValue,
                    expert2Id: endExpertId,
                    expert1Id: _this.expert.id
                }).then(function (result) {
                    if (!result.relation || result.relation.length < 1) {
                        $(".learn-loading").hide();
                        layer.msg("There is no relationship between them.");
                        $("#fa_thumb_tack_" +endExpertId).show();
                        return false;
                    }
                    /*layer.closeAll();*/
                    console.log(result)
                    var graph = {"nodes": [], "links": []};
                    var expertMap = {};
                    var iIndex = 0;
                    var startNodeId = -1, endNodeId = -1;
                    if (result.experts) {
                        result.experts.forEach(function (item) {
                            var expert = item.e;
                            var paper_count = 0;
                            if (expert.id == endExpertId || expert.id == _this.expert.id) {
                                paper_count = 20;
                            }
                            var e = {
                                "id": iIndex++,
                                "name": expert.name,
                                "paper_count": paper_count,
                                "url": "analysis.html?scholarId=" + expert.id
                            };
                            expertMap[expert.id] = e;
                            graph.nodes.push(e);
                        });
                    }
                    console.log(expertMap);
                    var jIndex = 0;
                    var rIndex = 0;
                    /*
                     *  路径数组形如[[0,1,6],[0,2,6],[0,4,6]]
                     */
                    result.relation.forEach(function (item) {
                        if (item.e && item.e.nodes) {
                            var nodes = item.e.nodes;
                            rIndex++;
                            for (var i = 0; i < nodes.length; i++) {
                                var arr = nodes[i].split("/");
                                nodes[i] = arr[arr.length - 1];
                                if (rIndex == 1 && startNodeId == -1) { //取得起点id
                                    startNodeId = expertMap[nodes[i]].id;
                                }
                                if (rIndex == 1 && i == nodes.length - 1) { // 取得终点id
                                    endNodeId = expertMap[nodes[i]].id;
                                }
                                if (i > 1 && i % 2 == 0) {
                                    graph.links.push({
                                        "id": jIndex++,
                                        "source": expertMap[nodes[i - 2]].id,
                                        "target": expertMap[nodes[i]].id,
                                        "co_count": 3
                                    });
                                }
                            }
                        }
                    });

                    // 改变起点和终点paper_count

                    console.log(graph);
                    $("#atlas").html("");
                    initKG("../js/dataGalaxy/conf.json", "div #atlas", graph, function () {
                        recordContainerClick(function () {
                            $('#biaoqian').prop('checked', false);
                        });

                        var $atlas = $("#atlas");
                        var height = $atlas.height();
                        var width = $atlas.width();
                        // 为起始和结束的节点设置固定均分的位置e
                        var obj = {};
                        obj[startNodeId] = {'x': 0.2 * width, 'y': 0.5 * height}
                        obj[endNodeId] = {'x': 0.8 * width, 'y': 0.5005 * height}
                        console.log(obj)
                        moveNodeTo(obj);
                        showNodeLabel(true);
                    });
                    $('#biaoqian').prop('checked', true);
                    $(".learn-loading").hide();
                    $(".content-chart").show();
                });

            },
            controlInfo: function () {
                var _this = this;
                _this.showInfoFlag = !_this.showInfoFlag;
            },
            turnMove: function (flag) {
                scrollWheel(flag);
            }
        }
    });
    //Lable标签显示
    $(document).on('change', $('#biaoqian'), function () {
        if ($('#biaoqian').prop('checked') === true) {
            showNodeLabel(true);
        } else {
            showNodeLabel(false);
        }
    })
</script>
</body>
</html>